/**
 * Created by Blink on 2017/8/24.
 * button base class
 */

import React from 'react';
import {StyleSheet, TouchableWithoutFeedback, View, Text} from 'react-native';
import ComponentBase from '../component.base';
import PropTypes from 'prop-types';
import BlinkType from '../../util/blink.prop.types';
import {Themes} from '../../blink.ui.param';
import Icon from '../text/icon';

export default class BlinkButtonBase extends ComponentBase {
    static propTypes = {
        ...ComponentBase.propTypes,
        title: PropTypes.string,
        size: PropTypes.number,
        icon: BlinkType.icon,

        onPress: PropTypes.func,
        onPressIn: PropTypes.func,
        onPressOut: PropTypes.func
    };

    static defaultProps = {
        size: 16,
        color: 'lightGrey'
    };

    constructor() {
        super();
        this.state = {
            press: false
        }
    }

    get _style() {

    }

    _genViewStyle() {
        return [
            Themes.button.base,
            this._style.style,
            this.state.press && this._style.pressStyle
        ]
    }

    _genChildren() {
        const icon = this.props.icon ? <Icon name={this.props.icon} style={[
            _css.icon,
            this._style.text,
            this.state.press && this._style.pressText
        ]} size={this.props.size + 4}/> : null;

        const title = this.props.title ? <Text style={[
            this._style.text,
            {fontSize: this.props.size},
            this.state.press && this._style.pressText,
        ]}>{this.props.title}</Text> : null;

        return (
            <View style={this._genViewStyle()}>
                {icon}
                {title}
            </View>
        );
    }

    _pressIn(e) {
        this.setState({press: true});
        this.props.onPressIn && this.props.onPressIn(e);
    }

    _pressOut(e) {
        this.setState({press: false});
        this.props.onPressOut && this.props.onPressOut(e);
    }

    _press(e) {
        this.props.onPress && this.props.onPress(e);
    }

    get _componentName() {
        return 'button'
    }

    render() {
        return (
            <TouchableWithoutFeedback onPressIn={(e) => this._pressIn(e)}
                                      onPressOut={(e) => this._pressOut(e)}
                                      onPress={(e) => this._press(e)}
            >
                {this._genChildren()}
            </TouchableWithoutFeedback>
        )
    }
}

const _css = StyleSheet.create({
    icon: {
        paddingRight: 8
    }
});